<template>
	<view class="fixtop">
		<fixtopVue>
			<template #l>
				<view class="fixtop-l" @click="back">
					<view class="iconfont icon-jiantouyou"></view>
				</view>
			</template>
			<template #c>
				<view class="fixtop-c">
					财务管理
				</view>
			</template>
		</fixtopVue>
	</view>
	<view class="conbox">
		<view class="showprice">
			<view class="showprice-t">
				账户余额
			</view>
			<view class="showprice-b">
				666666
			</view>
		</view>
		<view class="cippacth">
			<view class="cippacthitem"></view>
		</view>
		<view class="carditem">
			<view class="" v-for="i in carddata" :key="i.name">
				<view :class="i.icon" :style="{color:i.color}"></view>
				<view class="">{{i.tit}}</view>
			</view>
		</view>
		<view class="allprice">
			<view class="t">
				<view class="allprice-l">
					<view class=" iconfont icon-qian"></view>
				</view>
				<view class="allprice-r">
					<view class="allprice-r-t">0.00</view>
					<view class="allprice-r-b">今日预计数量（订单数：0）</view>
				</view>
			</view>
			<view class="b">
				<view class="">待入账金额</view>
				<view class="">3432.44</view>
			</view>
		</view>
		<view class="hiszd">
			  <view class="item" v-for="i in 10" :key="i">
				   <view class="item-l">
					    <view class="iconfont icon-qianqian"></view>
						<view class="item-l-l">
							<view class="t">共101单</view>
							<view class="b">2025-11-22</view>
						</view>
				   </view>
				   <view class="item-r">
					   <view class="t">4314</view>
					   <view class="b">已入账</view>
				   </view>
			  </view>
		</view>
	</view>
</template>

<script setup>
	import fixtopVue from '../../components/fixtop/fixtop.vue';
	import {
		getstatusheight,
		gettitleheight
	} from '@/utils/getsysteminfo.js'
	const product = getstatusheight() + gettitleheight() + 'px'
	const carddata = [{
			tit: "提现",
			icon: "iconfont icon-qianbao",
			path: "",
			color: "#f79033"
		},
		{
			tit: "充值",
			icon: "iconfont icon-chongzhi",
			path: "",
			color: "#8ddb3a"
		},
		{
			tit: "银行卡",
			icon: "iconfont icon-yinhangqia-xianxing",
			path: "",
			color: "#01a4ff"
		}
	]
	const back = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.hiszd{
		height: 700rpx;
		width: 90%;
		margin: auto;
		background-color: #fff;
		border-radius: 15rpx;
		overflow: auto;
		padding: 20rpx;
		// scrollbar-width: none;
		&::-webkit-scrollbar{
			display: none;
		}
		.item{
			height:140rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #eeeeee;
			.item-l{
				 display: flex;
				 justify-content: center;
				 align-items: center;
				.t{
					font-size: 28rpx;
				
				}
				.b{
					font-size: 25rpx;
				}
				 .iconfont{
					 font-size: 60rpx;        
					 padding: 20rpx;
				 }
			}
			.item-r{
				display: flex;
				flex-direction: column;
				font-size: 27rpx !important;
			}
		}
	}
	.allprice {
		height: 300rpx;
		width: 90%;
		margin: 0 auto 20rpx auto;
		background-color: #fff;
		border-radius: 15rpx;
		display: flex;
		flex-direction: column;
		padding: 20rpx;

		.t {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 20rpx;

			.iconfont {
				font-size: 85rpx;
				color: #ff644d;
			}

			.allprice-r {
				display: flex;
				flex-direction: column;
				gap: 18rpx;

				.allprice-r-t {
					color: #ff644d;
					font-size: 30rpx
				}

				.allprice-r-b {
					font-size: 25rpx;
				}
			}
		}

		.b {
			height: 50rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
		}
	}

	.carditem {
		height: 200rpx;
		width: 90%;
		background-color: #fff;
		border-radius: 15rpx;
		margin: -200rpx auto 20rpx auto;
		opacity: 0.99;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: space-around;

		>view {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			gap: 20rpx;
			font-size: 27rpx;

			.iconfont {
				font-size: 65rpx;
			}
		}
	}

	.fixtop {
		background-color: #ff644d;

		.fixtop-l,
		.fixtop-c {
			height: 100%;
			width: 100%;
			display: flex;
			align-items: center;
			color: #fff;
		}

		.fixtop-l {
			padding-left: 20rpx;

			.iconfont {
				transform: rotate(180deg);
				font-size: 25rpx;
			}
		}

		.fixtop-c {
			justify-content: center;
			font-size: 31rpx;
		}
	}

	.conbox {
		width: 100%;
		height: calc(100vh - v-bind(product));
		background-color: #eeeeee;
		overflow: hidden;
	}

	.showprice {
		height: 170rpx;
		background-color: #ff644d;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 20rpx;
		color: #fff;

		.showprice-t {
			font-size: 28rpx;
		}

		.showprice-b {
			font-size: 40rpx;
			font-weight: 700;
		}
	}

	.cippacth {
		height: 200rpx;
		width: 100%;
		overflow: hidden;
		opacity: 0.99;
		z-index: 1;
	}

	.cippacthitem {
		height: 200rpx;
		width: 100%;
		background-color: #ff644d;
		clip-path: ellipse(50% 35% at 50% 50%);
		margin-top: -100rpx;
	}
</style>